<template>
  <!-- 1.盒子 -->
  <!--<div :class="{flash: animated}"
       :style="{width, height}"
       class="xtx-skeleton">
    &lt;!&ndash; 2.闪效果 xtx-skeleton伪元素 &ndash;&gt;
    <div :style="{background: bg}" class="block"></div>
  </div>-->
  <div class="loading">
    <div class="loading-content">
      <img alt="" src="../../../assets/images/loading.gif">
      <p class="desc">{{ title }}</p>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Loading',
  // 向外暴露一些属性: 高、宽、背景、是否有闪动画
  props: {
    bg: {
      type: String,
      default: '#efefef'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    animated: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 提供一个默认值, 使用v-loading可以动态传参, 覆盖这个默认值
      title: '正在载入...'
    }
  },
  methods: {
    setTitle(title) {
      this.title = title
    }
  }
}
</script>

<style lang="less" scoped>

//.xtx-skeleton {
//  display: inline-block;
//  position: relative;
//  overflow: hidden;
//  vertical-align: middle;
//
//  .block {
//    width: 100%;
//    height: 100%;
//    border-radius: 2px;
//  }
//}
//
//.flash {
//  &::after {
//    content: '';
//    position: absolute;
//    animation: flash 1.5s ease 0s infinite;
//    top: 0;
//    width: 50%;
//    height: 100%;
//    background: linear-gradient(to left,
//    rgba(255, 255, 255, 0) 0,
//    rgba(255, 255, 255, 0.3) 50%,
//    rgba(255, 255, 255, 0) 100%);
//    transform: skewX(-45deg);
//  }
//}
//
//@keyframes flash {
//  0% {
//    left: -100%;
//  }
//  100% {
//    left: 120%;
//  }
//}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);

  .loading-content {
    text-align: center;

    .desc {
      line-height: 20px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}


</style>
